<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>栅格系统</title>
		<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css" type="text/css" />
		<link rel="stylesheet" href="mixin/wrapper.css" type="text/css" />
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-1" style="background-color: gold;">.col-md-1</div>
				<div class="col-md-1"style="background-color: magenta;">.col-md-1</div>
				<div class="col-md-1"style="background-color: green;">.col-md-1</div>
				<div class="col-md-1"style="background-color: yellow;">.col-md-1</div>
				<div class="col-md-1"style="background-color: black;">.col-md-1</div>
				<div class="col-md-1"style="background-color: lightcoral;">.col-md-1</div>
				<div class="col-md-1"style="background-color: darkblue;">.col-md-1</div>
				<div class="col-md-1"style="background-color: blue;">.col-md-1</div>
				<div class="col-md-1"style="background-color: burlywood;">.col-md-1</div>
				<div class="col-md-1"style="background-color: chocolate;">.col-md-1</div>
				<div class="col-md-1"style="background-color: darkblue;">.col-md-1</div>
				<div class="col-md-1"style="background-color: darkcyan;">.col-md-1</div>
			</div>
			<div class="row">
				<div class="col-md-8"style="background-color: darkblue;">.col-md-8</div>
				<div class="col-md-4"style="background-color: darkcyan;">.col-md-4</div>
			</div>
			<div class="row"> 
				<div class="col-md-4"style="background-color: darkcyan;">.col-md-4</div>
				<div class="col-md-4"style="background-color: beige;">.col-md-4</div>
				<div class="col-md-4"style="background-color: wheat;">.col-md-4</div>
			</div>
			<div class="row">
				<div class="col-md-6"style="background-color: darkcyan;">.col-md-6</div>
				<div class="col-md-6"style="background-color: beige;">.col-md-6</div> 
			</div>
			<div class="row">
				<div class="col-xs-12 col-md-8"style="background-color: darkcyan;">col-xs-12 col-md-8</div>
				<div class="col-xs-6 col-md-4"style="background-color: beige;">col-xs-6 col-md-4</div> 
			</div>
			<div class="row">
				<div class="col-xs-6 col-md-4"style="background-color: darkcyan;">col-xs-6 col-md-4</div>
				<div class="col-xs-6 col-md-4"style="background-color: beige;">col-xs-6 col-md-4</div> 
				<div class="col-xs-6 col-md-4"style="background-color: beige;">col-xs-6 col-md-4</div> 
			</div>
			<div class="row"> 
				<div class="col-xs-6 "style="background-color: beige;">col-xs-6 </div> 
				<div class="col-xs-6 "style="background-color: black;">col-xs-6 </div> 
			</div>
			<br />
			<div class="row">
				<div class="col-xs-6 col-md-3" style="background-color: green">.col-xs-6 .col-md-3 col-xs-6 .col-md-3col-xs-6 .col-md-3col-xs-6 .col-md-3col-xs-6 .col-md-3</div>
				<div class="col-xs-6 col-md-3" style="background-color: black;">.col-xs-6 .col-md-3</div>
				<div class="clearfix visible-xs-block"></div>
				<div class="col-xs-6 col-md-3" style="background-color: yellow">.col-xs-6 .col-md-3</div>
				<div class="col-xs-6 col-md-3" style="background-color: blue">.col-xs-6 .col-md-3</div>
			</div>
			<br />
			<div class="row">
				<div class="col-sm-5 col-md-6 "style="background-color: beige;">col-sm-5 col-md-6  </div> 
				<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0 "style="background-color: lemonchiffon;">col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0 </div> 
			</div>
			<div class="row">
			  <div class="col-sm-6 col-md-5 col-lg-6" style="background-color: darkblue;">.col-sm-6 .col-md-5 .col-lg-6</div>
			  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0" style="background-color: beige;">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
			</div>
			<div class="row row-no-gutters">
				<div class="col-xs-12 col-md-8" style="background-color: bisque;">col-xs-12 col-md-8</div>
				<div class="col-xs-6 col-md-4" style="background-color: cadetblue;">col-xs-6 col-md-4</div>
			</div>
			<div class="row row-no-gutters">
			  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
			  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
			  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
			</div>
			<div class="row row-no-gutters">
			  <div class="col-xs-6">.col-xs-6</div>
			  <div class="col-xs-6">.col-xs-6</div>
			</div>
			<br />
			<div class="row">
				<div class="col-md-9" style="background-color: bisque;">
					level 1: .col-md-9
					<div class="row">
						<div class="col-md-8" style="background-color: blue;">
							level 2: .col-md-8
						</div>
						<div class="col-md-4" style="background-color: chartreuse;">
							level 2: .col-md-4
						</div>
					</div>
				</div>
			</div>
			<br />
			<div class="row">
				<div class="col-md-9 col-md-push-3" style="background-color: cadetblue;">col-md-9 col-md-push-3</div>
				<div class="col-md-3 col-md-pull-9" style="background-color: darkkhaki;">col-md-3 col-md-pull-9 </div>
			</div>
			<br />
			<div class="wrapper">
				<div class="content-main " style="background-color: cadetblue;">content-main</div>
				<div class="content-secondary " style="background-color: darkgoldenrod;">content-secondary</div>
			</div>
		</div>
	</body>
</html>
